<div class="container-fluid">
    <div class="modal-header">
        <h5 class="modal-title text-danger">头像更换</h5>
        <button type="button" class="close" aria-label="Close" (click)="close()">
         <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="c-avatar-cut-box">
                <img-cropper #avatarCropper [image]="avatar" [settings]="avatarSettings" ></img-cropper>
            </div>
            <div class="c-avatar-preview-box c-ml15 text-center">
                <div class="c-avatar-title">头像预览</div>
                <div class="c-mt15">
                    <img class="center-block rounded-circle c-avatar-img-lg" [src]="userAvatar" >
                    <div class="c-avatar-desc c-mt5">原头像</div>
                </div>
                <div class="c-mt20">
                     <img class="center-block rounded-circle c-avatar-img-lg" *ngIf="avatar.image"  [src]="avatar.image" >
                     <img class="center-block rounded-circle c-avatar-img-lg" *ngIf="!avatar.image" [src]="userAvatar" >
                     <div class="c-avatar-desc c-mt5">90*90</div>
                </div>
                <div class="c-mt15">
                    <img class="center-block rounded-circle c-avatar-img-xs" *ngIf="avatar.image"  [src]="avatar.image" >
                    <img class="center-block rounded-circle c-avatar-img-xs" *ngIf="!avatar.image" [src]="userAvatar" >
                    <div class="c-avatar-desc c-mt5">36*36</div>
                </div>
            </div>
        </div>
        <div class="row  text-danger c-mt10">
            注：请上传小于2M的JPG/JPEG、PNG、GIF图片。
        </div>
    </div>

    <div class="modal-footer">
        <div class="row">
            <div class="col-md-4 text-left">
                <div class="c-file-upload">
                    <button class="btn btn-primary "><i class="fa fa-search" aria-hidden="true"></i> 浏览图片</button>
                    <input type="file"  c-img-cropper-select [cropper]="avatarCropper">
                </div>
            </div>
            <div class="col-md-4 text-center">
                <button type="button" class="btn btn-success" (click)="upload()"><i class="fa fa-cloud-upload" aria-hidden="true"></i> 上传图片</button>
            </div>
            <div class="col-md-4 text-right">
                <button type="button" class="btn btn-light" (click)="close()"><i class="fa fa-close" aria-hidden="true"></i> 关闭窗口</button>
            </div>
        </div>
    </div>


</div>
